﻿
@{
    ViewData["Title"] = "Recommand2";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .transition-box {
            margin-bottom: 10px;
            width: 200px;
            height: 100px;
            border-radius: 4px;
            background-color: #409EFF;
            text-align: center;
            color: #fff;
            padding: 40px 20px;
            box-sizing: border-box;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <el-container>
        <el-header>
            <div id="stepbar">
                <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
                    <el-step title="选择地区"></el-step>
                    <el-step title="步骤 2"></el-step>
                    <el-step title="步骤 3"></el-step>
                    <el-step title="出行时长"></el-step>
                    <el-step title="特色项目"></el-step>
                </el-steps>
            </div>
        </el-header>

        <el-main>
            <div id="app">
                <template>
                    <div>
                        <el-button @@click="show = !show">淡入淡出动画演示</el-button>

                        <div style="display: flex; margin-top: 20px; height: 100px;">
                            <transition name="el-fade-in-linear">
                                <div v-show="show" class="transition-box">琼南</div>
                            </transition>
                            <transition name="el-fade-in">
                                <div v-show="show" class="transition-box">琼北</div>
                            </transition>
                        </div>
                    </div>
                </template>
            </div>




        </el-main>
        <el-footer>
            <div id="pagination">
                <div class="block">
                    <el-pagination layout="prev, pager, next"
                                   :total="50">
                    </el-pagination>
                </div>
            </div>
        </el-footer>
    </el-container>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
      el: '#pagination',
    })
	    new Vue({
      el: '#stepbar',
    })
	    new Vue({
      el: '#mainform',
    })
	var Main = {
    data: () => ({
      show: true
    })
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>

